<template>
  <div class="container">
    <el-card>
      <!--  顶部搜索 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="form-inline"
        ref="searchFormRef"
      >
        <el-form-item label="关键字" prop="keyword">
          <el-input
            v-model="formInline.keyword"
            placeholder="根据文章标题搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" class="form-state" prop="state">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option label="启用" value="beiing"></el-option>
            <el-option label="禁用" value="tianjin"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="resetForm">
            清除
          </el-button>
          <el-button type="primary" size="small" @click="searchItem">
            搜索
          </el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            class="lastButton"
            size="small"
            @click="handleAdd"
          >
            新增技巧
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 消息提示 -->
      <el-alert
        v-if="this.alertText !== ''"
        :title="alertText"
        type="info"
        show-icon
        :closable="false"
        class="alertBox"
      ></el-alert>
      <!-- 表格的渲染 -->
      <el-table :data="dataList" style="width: 100%;" fit>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column label="文章标题" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <i
              class="el-icon-video-play play"
              v-if="scope.row.videoURL !== null"
              @click="videoPlay"
            ></i>
          </template>
        </el-table-column>
        <el-table-column label="阅读数">
          <template slot-scope="scope">
            <span>{{ scope.row.visits }}</span>
          </template>
        </el-table-column>
        <el-table-column label="录入人">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" class="handleSpan">
            <button
              class="el-button el-button--text el-button--medium"
              @click="previewArticle(scope.row)"
            >
              <span>预览</span>
            </button>
            <el-button
              type="text"
              size="medium"
              v-model="scope.row.state"
              @click="handleState(scope.row)"
            >
              <span v-if="scope.row.state === 0">启用</span>
              <span v-else-if="scope.row.state === 1">禁用</span>
            </el-button>
            <el-button
              type="text"
              size="medium"
              :disabled="scope.row.state === 1"
              @click="handleAdd(scope.row)"
            >
              <span>修改</span>
            </el-button>
            <el-button
              type="text"
              size="medium"
              :disabled="scope.row.state === 1"
              @click="deleteArticle(scope.row)"
            >
              <span>删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="pagination">
        <div class="pages">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(formInline.page)"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="Number(this.formInline.pagesize)"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Number(total)"
          ></el-pagination>
        </div>
      </div>
      <!--  添加文章的对话框 -->
      <Dialog
        ref="editArticle"
        :addFormData="dataList"
        @addArticleM="getlist"
        :titleInfo="titleText"
        :articleAddData="articleAddData"
      ></Dialog>
      <!--   预览文章对话框 -->
    </el-card>
    <articles-preview ref="preview" :formData="previewScope"></articles-preview>
    <!-- 遮罩层 -->
    <div class="popContainer" v-if="isVideoPlay">
      <div class="close">
        <span class="el-icon-close" @click="isVideoPlay = false"></span>
      </div>
      <div class="box">
        <video
          src="https://v-cdn.zjol.com.cn/277003.mp4"
          class="video"
          autoplay
        ></video>
      </div>
    </div>
  </div>
</template>

<script>
import {
  list,
  detail,
  remove,
  changeState,
  update,
} from '../../api/hmmm/articles'
import { parseTimeByString } from '../../filters/index'
import articleAdd from '../components/articles-add'
// import ArticlesAdd from '../components/articles-add.vue'
import Dialog from './../components/articles-add.vue'
import articlesPreview from './../components/articles-preview.vue'

export default {
  data() {
    return {
      formInline: {
        keyword: '',
        state: null,
        page: 1,
        pagesize: 10,
      },
      // searchFormRef: {},
      dataList: [],
      total: null,
      alertText: '',
      previewdialogVisible: false,
      previewScope: [],
      isVideoPlay: false,
      titleText: '',
      articleAddData: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: '',
      },
    }
  },
  components: {
    // 新增用户的组件
    Dialog,
    articlesPreview,
  },
  methods: {
    // 重置表单
    resetForm() {
      // this.formInline = {}
      this.$refs.searchFormRef.resetFields()
    },
    // 搜索表单
    searchItem() {
      this.formInline.page = 1
      this.getlist(this.formInline)
    },
    // 获取列表数据
    async getlist(data) {
      const { data: res } = await list(this.formInline)
      // console.log(res)
      this.dataList = res.items
      this.total = res.counts
      this.alertText = `数据一共  ${this.total}条`
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.formInline.pagesize = val

      this.getlist()
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.formInline.page = val
      this.getlist()
    },
    // 添加文章的目录
    async handleAdd(scope) {
      console.log(scope)
      this.$refs.editArticle.dialogFormV()
      if (scope) {
        // 实现修改的逻辑
        // 获取文章的详情

        this.titleText = '修改'
        this.articleAddData.id = scope.id
        this.articleAddData.title = scope.title
        this.articleAddData.articleBody = scope.articleBody
        this.articleAddData.videoURL = scope.videoURL
      } else {
        // 实现添加的逻辑
        this.titleText = '添加'
      }
      // console.log(this.$refs.editArticle)
      //
    },
    // 获取文章详情
    // 获取文章详情

    // 预览文章
    async previewArticle(scope) {
      this.$refs.preview.dialogVisible = true
      // console.log(scope);
      this.previewScope = scope
    },

    // 处理禁用启用按钮
    async handleState(scope) {
      const { data: res } = await changeState({
        id: scope.id,
        state: scope.state === 0 ? 1 : 0,
      })
      console.log(scope.state)

      if (scope.state == 0) {
        scope.state = 1
      } else {
        scope.state = 0
      }

      this.$message.success('操作成功')
    },

    // 删除文章
    deleteArticle(scope) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const data = await remove({ id: scope.id })
          console.log(data)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.getlist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    videoPlay() {
      console.log(12)
      this.isVideoPlay = true
    },
  },
  created() {
    this.getlist()
  },
}
</script>

<style scoped lang="scss">
.form-state {
  margin-left: 50px;
}
.container {
  margin: 10px;
}
.lastButton {
  margin-left: 400px !important;
}
.form-inline {
  padding-left: 20px;
}
.alertBox {
  margin-bottom: 15px;
}
.pages {
  margin-top: 10px;
}
.pagination {
  float: right;
  margin: 15px;
}
.play {
  color: #5f91fd;
  font-size: 20px;
}
// 遮罩层
div.popContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.close {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 50%;
  z-index: 9999999;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
}
.box {
  width: 800px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  /* -webkit-transform: translate(-50%, -50%); */
  transform: translate(-50%, -50%);
}
.video {
  width: 100%;
  height: 100%;
}
</style>
